<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>Wicket Charts Showcase</title>
<link
	href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold'
	rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushJava.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/shBrushXml.js"></script>
<link href="css/syntaxhighlighter/shCoreEclipse.css" rel="stylesheet"
	type="text/css" />
<link href="css/syntaxhighlighter/shThemeEclipse.css" rel="stylesheet"
	type="text/css" />

</head>
<body>
	<div id="hd">
		<div id="logo">
			<img src="logo.png" width="50px" height="50px" alt="Wicket Logo" />
			<h1>Wicket Charts Showcase ${wicket.charts.version}</h1>
		</div>
	</div>
	<div id="bd">

		<p>To add a chart to your Wicket page, include the following HTML
			and Java fragments into your code:</p>

		<pre class="brush: xml">
			&lt;!-- HTML code --&gt;
			&lt;div wicket:id="chart"/&gt;
		</pre>

		<pre class="brush: java">
			// Java code
			Options options = new Options();
			options.setTitle(new Title("My Chart"));
			... // to see more options, select a chart below and click the button "Show Java code"
			add(new HighChartContainer("chart", options));
		</pre>

		<div id="wrapper">

			<div id="accordion">
				<h3 class="headerbar">Line and scatter charts</h3>
				<ul>
					<li><a href="#" wicket:id="line">Basic Line</a></li>
					<li><a href="#" class="inactive">Ajax loaded data,
							clickable points</a>
					</li>
					<li><a href="#" wicket:id="withDataLabels">With data
							labels</a></li>
					<li><a href="#" wicket:id="zoomableTimeSeries">Time
							series, zoomable</a>
					</li>
					<li><a href="#" wicket:id="splineInverted">Spline with
							inverted axes</a></li>
					<li><a href="#" wicket:id="splineWithSymbols">Spline with
							symbols</a></li>
					<li><a href="#" wicket:id="splineWithPlotBands">Spline
							with plot bands</a>
					</li>
					<li><a href="#" wicket:id="irregularIntervals">Time data with irregular
							intervals</a>
					</li>
					<li><a href="#" wicket:id="logarithmicAxis">Logarithmic axis</a>
					</li>
					<li><a href="#" wicket:id="scatter">Scatter plot</a>
					</li>
				</ul>

				<h3 class="headerbar">Area charts</h3>
				<ul>
					<li><a href="#" wicket:id="area">Basic Area</a></li>
					<li><a href="#" wicket:id="areaWithNegativeValues">Area with negative values</a>
					</li>
					<li><a href="#" class="inactive">Stacked area</a>
					</li>
					<li><a href="#" class="inactive">Percentage area</a>
					</li>
					<li><a href="#" class="inactive">Area with missing points</a>
					</li>
					<li><a href="#" class="inactive">Inverted axes</a>
					</li>
					<li><a href="#" class="inactive">Area-spline</a>
					</li>
				</ul>

				<h3 class="headerbar">Column and bar charts</h3>
				<ul>
					<li><a href="#" class="inactive">Basic bar</a></li>
					<li><a href="#" class="inactive">Stacked bar</a>
					</li>
					<li><a href="#" class="inactive">Bar with negative stack</a>
					</li>
					<li><a href="#" class="inactive">Basic column</a>
					</li>
					<li><a href="#" class="inactive">Column with negative
							values</a>
					</li>
					<li><a href="#" class="inactive">Stacked column</a>
					</li>
					<li><a href="#" wicket:id="stackedColumn">Stacked and
							grouped column</a>
					</li>
					<li><a href="#" class="inactive">Stacked percentage column</a>
					</li>
					<li><a href="#" class="inactive">Column with rotated
							labels</a></li>
					<li><a href="#" class="inactive">Column with drilldown</a>
					</li>
					<li><a href="#" class="inactive">Data defined in a HTML
							table</a>
					</li>
				</ul>

				<h3 class="headerbar">Pie charts</h3>
				<ul>
					<li><a href="#" class="inactive">Pie chart</a></li>
					<li><a href="#" class="inactive">Pie with gradient fill</a>
					</li>
					<li><a href="#" wicket:id="donut">Donut chart</a>
					</li>
					<li><a href="#" class="inactive">Pie with legend</a>
					</li>
				</ul>

				<h3 class="headerbar">Dynamic charts</h3>
				<ul>
					<li><a href="#" class="inactive">Spline updating each
							second</a></li>
					<li><a href="#" class="inactive">Click to add a point</a>
					</li>
					<li><a href="#" class="inactive">Master-detail chart</a>
					</li>
				</ul>

				<h3 class="headerbar">Combinations</h3>
				<ul>
					<li><a href="#" wicket:id="combo">Column, Line and Pie</a></li>
					<li><a href="#" class="inactive">Dual axes, line and
							column</a></li>
					<li><a href="#" class="inactive">Multiple axes</a>
					</li>
					<li><a href="#" class="inactive">Scatter with regression
							line</a>
					</li>
				</ul>

				<h3 class="headerbar">More chart types</h3>
				<ul>
					<li><a href="#" class="inactive">Angular gauge</a>
					</li>
					<li><a href="#" class="inactive">Clock</a>
					</li>
					<li><a href="#" class="inactive">Gauge with dual axes</a>
					</li>
					<li><a href="#" class="inactive">VU meter</a>
					</li>
					<li><a href="#" class="inactive">Area range</a>
					</li>
					<li><a href="#" class="inactive">Column range</a>
					</li>
					<li><a href="#" wicket:id="polar">Polar chart</a>
					</li>
					<li><a href="#" class="inactive">Spiderweb</a>
					</li>
					<li><a href="#" class="inactive">Wind rose</a>
					</li>
				</ul>
			</div>

			<div style="float: right">
				<div id="tabs">
					<ul>
						<li><a href="#tab1" rel="/start/default">Default</a></li>
						<li><a href="#tab1" rel="/start/grid">Grid</a></li>
						<li><a href="#tab1" rel="/start/skies">Skies</a></li>
						<li><a href="#tab1" rel="/start/gray">Gray</a></li>
						<li><a href="#tab1" rel="/start/darkblue">Dark Blue</a></li>
						<li><a href="#tab1" rel="/start/darkgreen">Dark Green</a></li>
					</ul>
					<div id="tab1">
						<div wicket:id="chart" id="chart">CHART</div>

						<ul id="buttonList">
							<li><a href="#" id="showCodeButton">Show Java code</a>
							</li>
						</ul>
						<br style="clear: both" />
					</div>
				</div>


			</div>

		</div>



		<div id="codeDialog" style="background: white">
			<pre wicket:id="code" class="brush: java">Here comes the code</pre>
		</div>


	</div>
	<div id="ft"></div>
</body>
</html>
